<template>
    <div>
        <div style="background-color: white">
            <yb-header></yb-header>
            <div class="cardShwotime">
                <div class="stCard"></div>
                <div class="safe">
                    <div class="title">安全，高效</div>
                    <p style="margin-top: 48px" class="content">卡片为全球最领先类型CPU卡，因其具有很好的防复制、防伪造、防篡改的安全性，一般<br/>
                        用于金融、保险、交警、政府行业等领域。<br/>
                        一次制卡，后续操作（充值、挂失）均可线上完成，省时、省力，一个电话就搞定。</p>
                </div>

                <div class="stVip">
                    <div
                        style="margin-right:40px;display: flex;flex-flow: column; justify-content: center; align-items: center">
                        <div style="font-size: 40px">一卡在手，加油无忧</div>
                        <div style="margin-top: 50px">
                            <h4 class="content">充值：</h4>
                            <span class="content">随时随地在线充值，让你时刻有油可加，免去余额不足的烦恼。</span>
                            <h4 class="content">冻结：</h4>
                            <span class="content">卡片不在不要怕，第一时间冻结它，让您的财产免受意外损失。</span>
                            <h4 class="content">扣款：</h4>
                            <span class="content">充值有误怎么办？扣款功能让您的每一步操作都可以重新再来。</span>
                        </div>

                    </div>
                    <div class="img">

                    </div>
                </div>
                <div class="stFront">
                    <div class="img">
                    </div>
                    <div style="margin: 35px 0 0 40px">
                        <h4 class="content">支付安全：</h4>
                        <span class="content">无现金交易，不用担心现金遗失，被盗问题</span>
                        <h4 class="content">支付便捷：</h4>
                        <span class="content">无需担心现金真伪，找零等问题</span>
                        <h4 class="content">结算精确：</h4>
                        <span class="content">消费数据精确到每一个分，避免误差漏算带来账务问题</span>
                    </div>

                </div>
                <div class="stEnd">
                    <div class="item">
                        <div class="icon iconsub1"></div>
                        <h5 class="title">大容量</h5>
                        <span class="content">
                            容量为8K位EEPROM
                            <br/>
                            分为16个扇区，每个扇区为4块
                            <br/>
                            每块16个字节,以块为存取单位
                        </span>

                    </div>
                    <div class="item">
                        <div class="icon iconsub2"></div>
                        <h5 class="title">安全性</h5>
                        <span class="content">
                            每个扇区有独立的密码及访问控制
                            <br/>
                            安全保密性好，不容易被复制
                            <br/>
                            卡上信息需要安全密钥才能读写
                        </span>

                    </div>
                    <div class="item">
                        <div class="icon iconsub3"></div>
                        <h5 class="title">有效性</h5>
                        <span class="content">
                            通信速率106KBPS
                            <br/>
                            数据永久保存
                            <br/>
                            可改写10万次，读无限次
                        </span>

                    </div>
                </div>
            </div>
        </div>
        <yb-footer></yb-footer>
    </div>
</template>
<script>

    import header from '../packages/header'
    import footer from '../packages/footer.vue'

    export default {
        name: 'hello',
        components: {
            'yb-header': header,
            'yb-footer': footer
        },
    }
</script>
<style lang="less">
    @import "../less/variables";

    .cardShwotime {
        display: flex;
        justify-content: center;
        flex-flow: column;
        align-items: center;
        width: 100%;
    }

    .stCard {
        background-image: url("../assets/showtime/st_card.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        -webkit-background-size: 100% 100%;
        width: 760px;
        height: 570px;
        margin-top: 75px;
    }

    .safe {
        text-align: center;
        .title {
            font-size: 60px;
        }
        .centent {
            font-size: 22px;
        }
    }

    .stVip {
        margin-top: 75px;
        width: 100%;
        display: flex;
        background-color: #fafafa;
        justify-content: center;

        .img {
            background-image: url("../assets/showtime/st_vip.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            width: 407px;
            height: 437px;
            margin: 75px 0 75px 0;
        }
    }

    .stFront {
        margin-top: 75px;
        width: 100%;
        display: flex;
        justify-content: center;

        .img {
            background-image: url("../assets/showtime/st_front.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            width: 674px;
            height: 405px;
        }
    }

    .stEnd {
        margin: 75px 0 75px;
        width: @layout-width;
        display: flex;
        justify-content: space-between;

        .item {
            width: 35%;
            display: flex;
            flex-flow: column;
            align-items: center;

            .icon {
                height: 70px;
                width: 88px;

                background-repeat: no-repeat;
                background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -webkit-background-size: 100% 100%;
            }
            .iconsub1 {
                background-image: url("../assets/showtime/sub1.png");
            }
            .iconsub2 {
                background-image: url("../assets/showtime/sub2.png");
            }
            .iconsub3 {
                background-image: url("../assets/showtime/sub3.png");
            }

            .title {
                margin: 38px 0 38px;
                font-size: 26px
            }
            .content {
                .desc-font-size;
                text-align: center;
            }
        }
    }
</style>
